<template>
  <div class="company-page">
    <!-- 组织管理页面 -->
    <Card shadow>
      <div class="company-box">
        <Tabs value="0" v-model="tabVal" :animated="false">
          <TabPane label="部门管理" name="0">
            <div class="collapse">
              <Collapse simple v-for="first in departmentList" :key="first.id">
                <Panel name="1" :hide-arrow="!(first.childs&&first.childs.length)">
                  <div class="lineBox" @mouseenter="setEdit(first.id)" @mouseleave="setEdit()">
                    <div class="title">{{first.title}}</div>
                    <div v-if="first.showEdit" class="buttonList">
                      <Icon type="md-create" />
                      <Icon type="md-add" />
                      <Icon type="ios-trash" @click="departmentDelete(first.id)" />
                    </div>
                  </div>
                  <div slot="content" v-if="first.childs">
                    <Collapse simple v-for="second in first.childs" :key="second.id">
                      <Panel name="1-1" :hide-arrow="!(second.childs&&second.childs.length)">
                        <div
                          class="lineBox"
                          @mouseenter="setEdit(second.id)"
                          @mouseleave="setEdit()"
                        >
                          <div class="title">{{second.title}}</div>
                          <div class="buttonList" v-if="second.showEdit">
                            <Icon type="md-create" />
                            <Icon type="md-add" />
                            <Icon type="ios-trash" @click="departmentDelete(second.id)" />
                          </div>
                        </div>
                        <div slot="content" v-if="second.childs">
                          <Collapse simple v-for="third in second.childs" :key="third.id">
                            <Panel hide-arrow name="1-1-1">
                              <div
                                class="lineBox"
                                @mouseenter="setEdit(third.id)"
                                @mouseleave="setEdit()"
                              >
                                <div class="title">{{third.title}}</div>
                                <div class="buttonList" v-if="third.showEdit">
                                  <Icon type="md-create" />
                                  <Icon type="md-add" />
                                  <Icon type="ios-trash" @click="departmentDelete(third.id)" />
                                </div>
                              </div>
                            </Panel>
                          </Collapse>
                        </div>
                      </Panel>
                    </Collapse>
                  </div>
                </Panel>
              </Collapse>
            </div>
          </TabPane>
          <TabPane label="成员管理" name="1">
            <div class="table">
              <Table
                stripe
                :loading="loading"
                :columns="columns"
                :data="departmentUserList"
                no-data-text="暂无数据"
                no-filtered-data-text="暂无数据"
              >
              <template slot-scope="{ row }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="toDetail(row.id)">查看详情</Button>
                <Button type="error" size="small" @click="systemUserDelete(row.id)">删除成员</Button>
              </template>
              </Table>
            </div>
          </TabPane>
          <div slot="extra">
            <Row type="flex" span="12" style="width: 600px" justify="end" :gutter="20">
              <Col flex class="input" v-if="tabVal==1">
                <Input v-model="inputValue" @input="seachUser" maxlength="7" placeholder="成员姓名" style="width: 200px" >
                  <Icon type="ios-search" slot="prefix" />
                </Input>
              </Col>
              <Col flex v-if="tabVal==0">
                <Button icon="ios-add" @click="addDepartment(null)">新建部门</Button>
              </Col>
              <Col flex v-if="tabVal==1">
                <Button icon="md-contacts" @click="addUserModelShow = !addUserModelShow">新建成员</Button>
              </Col>
            </Row>
          </div>
        </Tabs>
      </div>

      <!-- <Drawer
        title="医生"
        v-model="deawerShow"
        width="720"
        scrollable
        :mask="false"
        class-name="drawer"
      >
        <div class="iconList">
          <Icon type="ios-add" />
          <Icon type="ios-more" />
        </div>

        <div class="table">
          <Table
            :border="false"
            context-menu
            show-context-menu
            :loading="loading"
            :columns="columns1"
            :data="data1"
            @on-contextmenu="handleContextMenu"
          ></Table>
        </div>
      </Drawer>-->
    </Card>
    <addModel
      :show="addModelShow"
      :addModelData="addModelData"
      @save="saveDepartment"
      @cancel="closeAddModel"
    />
    <addDepartmentUser
      :show="addUserModelShow"
      @save="saveUser"
      @cancel="closeAddUserModel"
    />
  </div>
</template>

<script>
import {
  getDepartment,
  getDepartmentUserList,
  getDepartmentDetail,
  departmentDelete,
  systemUserDelete
} from "@/api/department";
import addModel from "./components/addModel";
import addDepartmentUser from "./components/addDepartmentUser"
export default {
  name: "index_page",
  components: {
    addModel,
    addDepartmentUser
  },
  data() {
    return {
      tabVal: '',
      inputValue: "",
      loading: false,
      departmentList: [],
      columns: [
        {
          title: "头像",
          key: "avatar",
          align: 'center',
          render: (h, params) => {
						return h('img', {
							attrs: {
								src: params.row.avatar||'https://webimg.ziroom.com/1c853bc6-21fc-4e32-8a6f-18ec2c6fef32.png'
							},
							style: {
                width: '37px',
                height: '37px',
                'border-radius': '50%'
							}
						})
					}
        },
        {
          title: "姓名",
          key: "name",
          align: 'center'
        },
        {
          title: "职业",
          key: "role_name",
          align: 'center'
        },
        {
          title: "操作",
          align: 'center',
          slot: 'action'
        }
      ],
      departmentUserList: [],
      addModelShow: false,
      addModelData: {
        title: "",
        name: "",
        departmentList: [],
        departmentUserList: []
      },
      addUserModelShow:false
    };
  },
  mounted() {
    this.getDepartment();
    this.getDepartmentUserList();
  },
  methods: {
    getDepartment() {
      getDepartment({}).then(res => {
        function setdDefault(list) {
          if (list && list.length) {
            list.forEach(item => {
              item.showEdit = false;
              setdDefault(item.childs);
            });
          }
          return list;
        }
        if (res.data) {
          this.departmentList = Object.assign([], setdDefault(res.data));
        }
      });
    },
    setEdit(id) {
      let acvityId = id;
      function setEdit(list) {
        if (list && list.length) {
          list.forEach(item => {
            if (item.id == acvityId) {
              item.showEdit = true;
            } else {
              item.showEdit = false;
            }
            setEdit(item.childs);
          });
        }
        return list;
      }
      this.departmentList = Object.assign([], setEdit(this.departmentList));
    },
    getDepartmentUserList(page,name){
      getDepartmentUserList({ 
        department_id:'',
        page:page||1,
        name
      }).then(res=>{
        if(res.data){
          this.departmentUserList = res.data.list;
        }else{
          this.$Message.error(res.msg);
        }
      })
    },
    async addDepartment(department_id) {
      let departmentUserList = await getDepartmentUserList({ department_id });
      let departmentDetail = await getDepartmentDetail({ id: department_id });
      this.addModelData = {
        title: department_id ? "编辑部门" : "新建部门",
        name: "",
        departmentList: departmentDetail.data.department_list,
        departmentUserList: departmentUserList.data.list
      };
      this.addModelShow = true;
    },
    saveDepartment() {
      this.getDepartment();
      this.addModelShow = false;
    },
    closeAddModel(show) {
      this.addModelShow = show;
    },
    saveUser(){
      this.getDepartmentUserList();
      this.addUserModelShow = false;
    },
    closeAddUserModel(show){
      this.addUserModelShow = show;
    },
    departmentDelete(id) {
      this.$Modal.confirm({
        title: '确定删除部门？',
        loading: true,
        onOk: () => {
           departmentDelete({ id }).then(res => {
            if (res.code == 100000) {
              this.$Modal.remove();
              this.getDepartment();
              this.$Message.success(res.msg);
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    },
    systemUserDelete(id){
      this.$Modal.confirm({
        title: '确定删除成员？',
        loading: true,
        onOk: () => {
           systemUserDelete({ id }).then(res => {
            if (res.code == 100000) {
              this.$Modal.remove();
              this.getDepartmentUserList();
              this.$Message.success(res.msg);
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    },
    toDetail(id){
      
    },
    debounce (func) {
      if (this.timeout) clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        func()
      }, 300)
    },
    seachUser(){
      this.debounce(this.search)
    },
    search(){
      this.getDepartmentUserList(1,this.inputValue)
    }
  }
};
</script>
<style lang="less" scoped>
.drawer {
  .ivu-drawer-body {
    overflow: visible;
  }
  .iconList {
    position: absolute;
    right: 58px;
    top: -51px;
    font-size: 31px;
    color: #999;
    cursor: pointer;
  }
}
</style>
<style lang="less">
.size {
  width: 100%;
  height: 100%;
}
.ivu-tabs {
  overflow: inherit !important;
}
.ivu-tabs-bar {
  border-bottom: 0 none;
}
.ivu-tabs-nav-right {
  position: relative;
}
.ivu-collapse-content > .ivu-collapse-content-box {
  padding: 0;
}
.ivu-collapse {
  border-top: 1px solid #dcdee2;
  border-bottom: 0 none;
}
.ivu-collapse > .ivu-collapse-item {
  .ivu-collapse-header {
    border-color: transparent;
    height: 44px;
    background-color: #fff;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    .lineBox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }
    .buttonList {
      display: flex;
      align-items: center;
      .ivu-icon {
        font-size: 16px;
        margin-right: 30px;
        color: #979797;
      }
    }
  }
  .ivu-collapse-header:hover {
    background-color: #fbfbfb;
  }
}
.button {
  button {
    border: 0px !important;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #242424;
    line-height: 14px;
    outline: none;
  }
  .ivu-icon {
    font-size: 19px;
    font-weight: 700;
  }
}
.search-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
}
.table {
  margin-top: 20px;
}
.button-add {
  button {
    border: 0px !important;
    outline: none !important;
    i {
      font-size: 20px;
      font-weight: 800;
    }
  }
}
</style>
